<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向滑屏</title>
    <style>
        *{margin:0;padding:0}
        html,body,#app{
            width: 100%;
            height: 100%;
            overflow:hidden;
            position:relative;
        }

        #content{
            height: 2000px;
            position:absolute;
            width: 100%;
            left: 0;
            top: 0;
            background: linear-gradient(to bottom, #aef, #213);
        }
        .scroll-bar{
            width: 4px;
            height: 100px;
            border-radius: 2px;
            background: rgba(0,0,0,0.5);
            position:absolute;
            right: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="content">
            央视春晚曾有个经典小品《装修》，黄宏扮演的"黄大锤"砸了半天墙，结果错把6楼当成9楼，砸错了对象。没想到，这样的事情在现实中真实发生了。

            11月4日，江苏南京市民彭女士接到电话，来电的是她家新房小区的物业管家，称有人主动承认，不小心走错门把她家的精装修给拆了。这些天，彭女士看着已成一片狼藉的高档精装修住房，真是欲哭无泪。
            央视春晚曾有个经典小品《装修》，黄宏扮演的"黄大锤"砸了半天墙，结果错把6楼当成9楼，砸错了对象。没想到，这样的事情在现实中真实发生了。

11月4日，江苏南京市民彭女士接到电话，来电的是她家新房小区的物业管家，称有人主动承认，不小心走错门把她家的精装修给拆了。这些天，彭女士看着已成一片狼藉的高档精装修住房，真是欲哭无泪。
央视春晚曾有个经典小品《装修》，黄宏扮演的"黄大锤"砸了半天墙，结果错把6楼当成9楼，砸错了对象。没想到，这样的事情在现实中真实发生了。

11月4日，江苏南京市民彭女士接到电话，来电的是她家新房小区的物业管家，称有人主动承认，不小心走错门把她家的精装修给拆了。这些天，彭女士看着已成一片狼藉的高档精装修住房，真是欲哭无泪。
央视春晚曾有个经典小品《装修》，黄宏扮演的"黄大锤"砸了半天墙，结果错把6楼当成9楼，砸错了对象。没想到，这样的事情在现实中真实发生了。

11月4日，江苏南京市民彭女士接到电话，来电的是她家新房小区的物业管家，称有人主动承认，不小心走错门把她家的精装修给拆了。这些天，彭女士看着已成一片狼藉的高档精装修住房，真是欲哭无泪。
央视春晚曾有个经典小品《装修》，黄宏扮演的"黄大锤"砸了半天墙，结果错把6楼当成9楼，砸错了对象。没想到，这样的事情在现实中真实发生了。

11月4日，江苏南京市民彭女士接到电话，来电的是她家新房小区的物业管家，称有人主动承认，不小心走错门把她家的精装修给拆了。这些天，彭女士看着已成一片狼藉的高档精装修住房，真是欲哭无泪。

        </div>
        <!-- 滚动条 -->
        <div class="scroll-bar"></div>
    </div>

    <script>
        let app = document.querySelector("#app");
        let content = document.querySelector("#content");
        let scrollBar = document.querySelector(".scroll-bar");

        //初始化函数
        function init(){
            //计算滚动条应该的高度
            let x  = document.documentElement.clientHeight / content.offsetHeight * document.documentElement.clientHeight;
            //设置
            scrollBar.style.height = x + 'px';
        }
        init();

        //绑定事件
        content.addEventListener("touchstart", function(e){
            //获取尺寸
            this.er = content.offsetTop;//获取内容区距离容器顶部的偏移量
            this.si = e.changedTouches[0].clientY;//获取手指按下时在 Y 轴方向的偏移量
        })

        content.addEventListener('touchmove', function(e){
            //移除过渡
            this.style.transition = 'none';
            scrollBar.style.transition = 'none';

            let san = e.changedTouches[0].clientY;//获取手指滑动时在 Y 轴方向的偏移量
            //计算
            let yi  = san - this.si + this.er;
            //设置 top 样式
            this.style.top = yi + 'px';
            //修改 滚动条的位置
            let x  = yi / content.offsetHeight * document.documentElement.clientHeight;
            //设置
            scrollBar.style.top = -x + 'px';
        })

        content.addEventListener('touchend', function(e){
            this.style.transition = 'all 0.3s';
            scrollBar.style.transition = 'all 0.3s';
            //判断位置是否已经越界
            if(this.offsetTop >= 0){
                this.style.top = 0;
                scrollBar.style.top = 0;
            }
        })

    </script>
</body>
</html>